<template>
	<view class="bg">
    <u-toast ref="uToast"></u-toast>
		<!-- 信息栏 -->
    <view class="info common">
      <!--左边-->
      <view class="left">
        <!--头像-->
        <view class="avatar">
          <u-avatar
              v-if="userInfo.avatarUrl!==null"
              :text="userInfo.name[0]"
              :size="50"
              random-bg-color
          ></u-avatar>
          <u-avatar
              v-else
              :size="50"
              :src="userInfo.avatarUrl"
          ></u-avatar>
        </view>
        <!--姓名-->
        <view class="name">
          <u-text :text="userInfo.name"></u-text>
        </view>
      </view>
      <!--右边-->
      <view class="right" @click="navigate('/pages/UserInfoEdit')">
        <!--编辑-->
        <view class="btn-edit">
          <u-text text="编辑" suffix-icon="arrow-right" type="info"></u-text>
        </view>
      </view>
    </view>
    <!--管理栏-->
		<view class="manage card common" v-if="manageStatus">
      <u-cell-group
        :border="false"
      >
        <u-cell
          title="图书管理"
          icon="grid"
          :is-link="true"
          @click="navigate('/pages/BookList')"
        ></u-cell>
      <u-cell
          title="用户管理"
          icon="account"
          :is-link="true"
          @click="navigate('/pages/UserList')"
      ></u-cell>
        <u-cell
            title="标签管理"
            icon="tags"
            :is-link="true"
            @click="navigate('/pages/LabelList')"
        ></u-cell>
        <u-cell
            title="借阅管理"
            icon="order"
            :is-link="true"
            @click="navigate('/pages/RecordList')"
        ></u-cell>
      </u-cell-group>
    </view>
    <!--标签栏-->
    <view class="option card common">
      <u-cell-group
          :border="false"
      >
        <u-cell
            title="我的借阅"
            icon="clock"
            :is-link="true"
            @click="navigate('/pages/UserRecordList')"
        ></u-cell>
        <u-cell
            title="帮助中心"
            icon="question-circle"
            :is-link="true"
        ></u-cell>
        <u-cell
            title="设置"
            icon="setting"
            :is-link="true"
            @click="navigate('/pages/Setting')"
        ></u-cell>
      </u-cell-group>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        userInfo: {
          openId:'',
          name: '',
          tel: '',
          email: '',
          role:0,
          avatarUrl:''
        },
        manageStatus:false
			}
		},
		methods: {
      getUserInfo() {
        this.userInfo = uni.getStorageSync("userInfo")
        this.manageStatus = (this.userInfo.role === 1)
      },
      navigate(url){
        uni.navigateTo({
          url:url
        })
      }

    },
    created() {
      this.getUserInfo()
    }
  }
</script>

<style lang="scss">
.bg{
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
  .info{
    padding-top: 20px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .name{
        margin-left: 10px;
      }
    }
  }
  .manage{
    margin-top: 15px;
  }
  .option{
    margin-top: 15px;
  }
}
</style>
